(function () {  //滑屏操作
    var scrollWrap = document.querySelector('.scrollWrap'),
        inner = document.querySelector('.inner');

    var startPointX = 0, //摁下时手指的坐标
        startLeft = 0, //摁下时元素的位置
        movePointX = 0;//坐标点一移动的位置（拖拽的距离）

    inner.style.transform = 'translateX(0px)';

    scrollWrap.addEventListener('touchstart', function (ev) { //手指摁下事件
        startPointX = ev.changedTouches[0].pageX;//摁下时屏幕第一根手指的位置
        startLeft = parseInt(inner.style.transform.split('(')[1]);


    });

    scrollWrap.addEventListener('touchmove', function (ev) {  //手指滑动
        movePointX = ev.changedTouches[0].pageX - startPointX; //手指拖拽的距离
        var x = movePointX + startLeft;//元素走的距离

        if (x >= 0) { //左边到头了
            x = 0;
        } else if (x <= scrollWrap.offsetWidth - inner.offsetWidth) {
            x = scrollWrap.offsetWidth - inner.offsetWidth;
        }


        inner.style.transform = 'translateX(' + x + 'px)';

        ev.preventDefault(); //左右的拖拽有可能触发上下的拖拽
    })
})();


(function () {//折叠导航
    var more = document.querySelector('.channel .more span'),
        channel = document.querySelector('.channel '),
        inner = document.querySelector('.inner '),
        shadow = document.querySelector('.shadow ');


    var shrink = true;
    more.addEventListener('touchend', function () {
        if (shrink) {
            channel.classList.add('blockChannel');
            shadow.style.display = 'block';
        } else {
            channel.classList.remove('blockChannel');
            shadow.style.display = 'none';
        }

        shrink = !shrink;
    });

    shadow.addEventListener('touchstart', function (ev) {
        ev.preventDefault();
    })
})();


(function () {     //轮播图
    var banner = document.querySelector('.banner'),
        wrap = document.querySelector('.wrap'),
        circles = document.querySelectorAll('.banner .circle span'),
        imgWidth = banner.offsetWidth; //一个图片的宽度

    var startPointX = 0,
        startLeft = 0,
        movePointX = 0,
        cn = 0,//当前的索引
        ln = 0,//上一个索引
        timer = null;

    //初始化
    wrap.innerHTML += wrap.innerHTML;
    var len = wrap.children.length; //子元素的数量
    wrap.style.width = len * 100 + 'vw';
    // wrap.style.width = len * imgWidth+'px';
    wrap.style.transform = 'translateX(0px)';


    banner.addEventListener('touchstart', function (ev) {

        clearInterval(timer);
        wrap.style.transition = 'null';

        if (cn == 0) {      //摁下的是第0张，如果往右走会出现空白
            cn = len / 2;
        }

        if (cn == len - 1) {    //摁下的是最后一张，如果往左走会出现空白
            cn = len / 2 - 1;
        }

        wrap.style.transform = 'translateX( ' + -cn * imgWidth + 'px)';

        startPointX = ev.changedTouches[0].pageX;//摁下时屏幕第一根手指的位置
        startLeft = parseInt(wrap.style.transform.split('(')[1]);
    });

    banner.addEventListener('touchmove', function (ev) {
        movePointX = ev.changedTouches[0].pageX - startPointX; //手指拖拽的距离



        wrap.style.transform = 'translateX(' + (movePointX + startLeft) + 'px)';
    })

    banner.addEventListener('touchend', function (ev) {  //手指抬起
        movePointX = ev.changedTouches[0].pageX - startPointX; //手指拖拽的距离

        // cn++;
        var backWidth = imgWidth / 6; //回弹的距离
        if (Math.abs(movePointX) > backWidth) {   //这个条件成立，说明拖拽的距离超过了回弹的距离，要走到下一张
            cn -= movePointX / Math.abs(movePointX); //Math.abs(movePointX) 为正值

            // cn -= -1;
            // cn -= 1;
        }


        wrap.style.transition = '.3s';
        wrap.style.transform = 'translateX(' + -cn * imgWidth + 'px)';

        // cn:0 1 2 3 4 5 6 7 8...
        //    0 1 2 3 0 1 2 3
        var hn = cn % (len / 2);

        circles[ln].className = '';
        circles[hn].className = 'active';
        ln = hn;
        timer = setInterval(move, 3000);
    })

    function move() {
        cn++;

        wrap.style.transition = '.3s';
        wrap.style.transform = 'translateX(' + -cn * imgWidth + 'px)';

        wrap.addEventListener('transitionend', function () {
            if (cn > len - 1) {
                cn = len / 2 - 1;
            }

            wrap.style.transition = 'null';
            wrap.style.transform = 'translateX(' + -cn * imgWidth + 'px)';

            var hn = cn % (len / 2);
            circles[ln].className = '';
            circles[hn].className = 'active';
            ln = hn;
        });
    }

    timer = setInterval(move, 3000);

})();


(function () {
    var backTop = document.querySelector('.backTop');

    window.onscroll = function () {
        var top = window.pageYOffset;  //滚动条走的距离
        backTop.style.opacity = top > 600 ? 1 : 0;
    }

    backTop.addEventListener('touchend', function () {
        window.scrollTo(0, 0); //回到顶部
    })
})();